import React, { FC, useState } from 'react'
import { Typography, Empty, Table, Tag, Button, Space, Modal, Spin, message } from 'antd'
import { useTitle, useRequest } from 'ahooks'
import { ExclamationCircleOutlined } from '@ant-design/icons'

import QuestionCard from '../../components/QuestionCard'
import ListSearch from '../../components/ListSearch'
import ListPage from '../../components/ListPage/ListPage'
import { updateQuestionServices, deleteQuestionListServices } from '../../services/question'
import useLoadQuestionListData from '../../hooks/useLoadQuestionListData'
import styles from './common.module.scss'
const { confirm } = Modal
const { Title } = Typography

const tableColumns = [
    {
        title: '标题',
        dataIndex: 'title',
    },
    {
        title: '是否发布',
        dataIndex: 'isPublished',
        render: (isPublished: boolean) => {
            return isPublished ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>
        },
    },
    {
        title: '答卷数量',
        dataIndex: 'anserCount',
    },
    {
        title: '创建时间',
        dataIndex: 'createdAt',
    },
]

const Trash: FC = () => {
    useTitle('小滕问卷-回收站')
    const { data = {}, loading, refresh } = useLoadQuestionListData({ isDeleted: true })
    const { list = [], total = 0 } = data
    // 记录选中的id集合
    const [selectedIds, setSelectedIds] = useState<string[]>([])

    // 恢复操作
    const { run: recover, loading: restoreQuestionDataLoading } = useRequest(
        async () => {
            for await (const id of selectedIds) {
                await updateQuestionServices(id, { isDeleted: false })
            }
        },
        {
            manual: true,
            debounceWait: 500,
            onSuccess(res) {
                message.success('恢复成功')
                refresh()
                setSelectedIds([])
            },
        }
    )
    // 批量删除问卷
    const { run: deleteQuestion, loading: deleteQuestionDataLoading } = useRequest(
        async () => await deleteQuestionListServices(selectedIds),
        {
            manual: true,
            debounceWait: 600,
            onSuccess(res) {
                message.success(`您已成功删除${JSON.stringify(selectedIds)}问卷`)
                refresh()
                setSelectedIds([])
            },
        }
    )
    // 彻底删除问卷弹窗提示
    function deleteHandler() {
        confirm({
            title: '是否确认彻底删除该问卷？',
            icon: <ExclamationCircleOutlined />,
            content: '删除以后无法找回该数据',
            onOk: deleteQuestion,
        })
    }

    const tableElement = (
        <>
            <div style={{ marginBottom: '16px' }}>
                <Space>
                    <Button type="primary" disabled={selectedIds.length === 0} onClick={recover}>
                        恢复
                    </Button>
                    <Button danger disabled={selectedIds.length === 0} onClick={deleteHandler}>
                        彻底删除
                    </Button>
                </Space>
            </div>

            <Table
                dataSource={list}
                columns={tableColumns}
                pagination={false}
                rowKey={(q: any) => q._id}
                rowSelection={{
                    type: 'checkbox',
                    onChange: selectedRowkeys => {
                        setSelectedIds(selectedRowkeys as string[])
                    },
                }}
            />
        </>
    )
    return (
        <>
            <div className={styles.header}>
                <div className={styles.left}>
                    <Title level={3}>回收站</Title>
                </div>
                <div className={styles.right}>
                    <ListSearch />
                </div>
            </div>

            <div className={styles.content}>
                {loading && (
                    <div style={{ textAlign: 'center' }}>
                        <Spin />
                    </div>
                )}
                {!loading && list.length === 0 && <Empty description="暂无数据" />}
                {
                    !loading && list.length > 0 && tableElement
                    // questionList.map(qItem => {
                    //     const { _id } = qItem
                    //     return <QuestionCard key={_id} {...qItem} />
                    // })
                }
            </div>
            <div className={styles.footer}>
                <ListPage total={90}></ListPage>
            </div>
        </>
    )
}

export default Trash
